<!DOCTYPE html>
<html>
<head>
    <title>温度计</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <style type="text/css">
    html{height: 100%;}
    body{margin: 0; padding: 0; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #666;}
        .container{ font-size: 0; width: 4rem; position: relative;}
        .bg{width: 100%; position: relative; z-index: 3;}
        .tota{ width: 1.7rem; height: 1.7rem; position: absolute; z-index: 2; background-color: #20fb16; left: 50%; bottom: .9rem; margin-left: -0.85rem; border-radius: 50%;
            transition: background-color 0.2s ease; -webkit-transition: background-color 0.5s ease;
        }
        .num{color: #fff; font-size: 1rem; position: absolute; top: .6rem; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0);}
        .line{ width: .54rem; height: 1.2rem; position: absolute; z-index: 1; background-color: #20fb16; left: 50%; margin-left: -0.27rem; bottom: 1.7rem; transition: height 0.5s ease, background-color 0.5s ease; -webkit-transition: height 0.5s ease, background-color 0.5s ease;}
        .isUpTemp .tota, .isUpTemp .line{ background-color: #c20909; }
    </style>
</head>
<body>
    <div class="container" id="container">
        <img class="bg" src="img/bg.png">
        <div class="num" id="tampNum">0</div>
        <div class="tota"></div>
        <div class="line" id="tempLine"></div>
    </div>
    <script type="text/javascript">
        (function(){
            var resizeAction = function(){
                var width = document.body.clientWidth
                var remSize = width / 7.5
                if(remSize > 50) remSize = 50
                document.getElementsByTagName('html')[0].style.fontSize = remSize + 'px'
                return resizeAction
            }
            window.addEventListener('resize', resizeAction())
        })()

        var GetRandomNum = function(Min,Max){   
            var Range = Max - Min
            var Rand = Math.random()
            return(Min + Math.round(Rand * Range)) 
        }   

        var setTempLineTo = (function(){
            var tempLine = document.getElementById('tempLine')
            var container = document.getElementById('container')
            var tampNum = document.getElementById('tampNum')
            var ONETEMPHEIGHT = 11.9 / 110
            var DEFAULTHEIGHT = 1.2
            return function(temp){
                var isUpTemp = temp > 0
                var realTemp = isUpTemp ? (temp + 60) : (60 + temp)
                if(isUpTemp) {
                    container.className = 'container isUpTemp'
                } else {
                    container.className = 'container'
                }
                tempLine.style.height = realTemp * ONETEMPHEIGHT + DEFAULTHEIGHT + 'rem'
                tampNum.innerHTML = temp
            }
        })()

        setInterval(function(){
            setTempLineTo(GetRandomNum(-60, 50))
        }, 1000)
        
    </script>
</body>
</html>
